<!--
公用标记弹窗
-->
<template>
  <el-dialog :visible.sync="showDialog" width="450px" class="m-dialog"
             :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" title="标记" @open="open">
    <el-form :inline="true" :model="form" ref="markDataForm">
      <el-form-item prop="mark">
        <el-select
          v-model="form.mark"
          filterable
          multiple
          reserve-keyword
          placeholder="请选择">
          <el-option
            :label="item.name"
            :value="item.name"
            v-for="(item,index) in dataList"
            :key="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="cancel">取消</el-button>
      <el-button @click="submit" type="primary">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import * as LabelAPI from '@/Api/label'
  import * as Utils from '@/utils'
  import {mapActions, mapGetters} from 'vuex'
  export default {
    name: 'CompUploadDialog',
    data () {
      return {
        form: {
          mark: []
        },
        hasLabels: [],
        showDialog: false,
        loading: false,
        dataList: [],
        pagination: {
          pageSize: 9999,
          pageNo: 1
        },
      }
    },
    props: {
      markData: {
        type: Object,
        default: function () {
          return {
            type: '2',
            labelsStr: ''
          }
        }
      },
      show: {
        type: Boolean,
        default: false,
      },
    },
    watch: {
      'show'(val){
        this.showDialog = val;
        if (val == false) {
          this.cancel();
        }
      },
      'markData.labelsStr'(val) {
        this.labels = [];
        this.form.mark = [];
        val.split(',').forEach(item => {
          if (item) {
            let _arr = item.split('|');
            this.hasLabels.push({color: _arr[0], name: _arr[1], id: _arr[2]})
            this.form.mark.push(_arr[1])
          }
        })
      }
    },
    methods: {
      cancel(){
        this.dataList = [];
        this.showDialog = false;
        this.$emit('update:show', false)
        this.$refs.markDataForm.resetFields();
      },
      submit() {
        let _idArr = [];
        let _labels = [].concat(this.hasLabels, this.dataList);
        if (this.form.mark.length > 0) {
          this.form.mark.forEach(item => {
            for (let i = 0; i < _labels.length; i++) {
              if (item == _labels[i].name) {
                _idArr.push(_labels[i].id);
                break;
              }
            }
          })
        }
        this.$emit('submit', {
          mark: {
            labels: _idArr.join('|'),
            labelsName: this.form.mark.join('|')
          }
        })

      },
      open() {
        this.queryList();
      },
      handleClose(label) {
        this.labels.splice(this.labels.indexOf(label), 1);
        if (this.form.mark.indexOf(label.id) >= 0) {
          this.form.mark.splice(this.form.mark.indexOf(label.id), 1)
        }
      },
      queryList(){
        LabelAPI.labelQuery({
          type: this.markData.type,
          pageNo: this.pagination.pageNo,
          pageSize: this.pagination.pageSize
        })
          .then(res => {
            if (res.code != 0) {
              this.$notify({
                title: '温馨提示',
                message: res.msg,
                type: 'warning'
              })
              return;
            }
            this.dataList = res.data.data;
          })
          .catch(error => {
            console.log(error);
          })
      }
    },
  }
</script>

<style scoped lang="scss">
</style>
